<template>
  <div class="bottom-info">
    <div class="left">
      <check-button @click.native="toggleAll" class="check-button" :isChecked='!getStatusOfAll' />
      <span>全选</span>
    </div>
    <div class="right">
      <span>合计：</span>
      <span class="total">{{ '￥'+ getTotalPrice.toFixed(2) }}</span>
    </div>
    <div class="toJiesuan" :class="{none: checkedLength<=0}" @click='jiesuan'>
      去结算{{checkedLength}}
    </div>

  </div>
</template>

<script>
import CheckButton from 'components/content/checkbutton/CheckButton';
import { mapGetters } from 'vuex'
export default {
  name: "CartBottomInfo",
  props:{
    item:{
      type: Object,
      default(){
        return {}
      }
    }
  },
  computed:{
    ...mapGetters(['getCartList','getTotalPrice','getStatusOfAll']),
    checkedLength(){
      return this.getCartList.filter(item=>{
        return item.checked === true
      }).length
    }
  },
  components:{
    CheckButton,
  },
  methods:{
    toggleAll(){
      if(!this.getStatusOfAll){
        this.$store.commit('checkedAll')
      }else {
        this.$store.commit('deCheckedAll')
      }
    },
    jiesuan(){
      if(this.checkedLength<=0) {
        this.$toast.show('请选择商品',1500)
        return ;
      }

    }
  }

}
</script>

<style scoped>
  .bottom-info {
    height: 40px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    padding: 0  0  0 15px;
    box-sizing: border-box;
  }
  .left,.right {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  .right .total {
    width: 80px;
  }
  .check-button {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .toJiesuan {
    background-color: var(--color-high-text);
    height: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    color:#fff;
    flex: 1;
  }
    .toJiesuan.none{
      background-color: #ccc;
    }
</style>